import {defineComponent, reactive, ref} from "vue";
import style from "./css/collect.module.css"
import {CollectStore} from "@/stores/collect";
import {storeToRefs} from "pinia";
import {InformationStore} from "@/stores/information";
import {useRouter} from "vue-router";
import {formatDateTime} from "@/utils/utils";
import Pagination from "@/components/Pagination";

export default defineComponent({

    setup() {
        const collect_store =  CollectStore()
        const information_store = InformationStore()
        const {collectList,collectInfo} = storeToRefs(collect_store)
        const router = useRouter()
        const total = ref(0)
        const queryParams = reactive({
            type: 1,
            pageSize: 10,
            pageNum: 1
        })
        const initList = async () => {
            const res = await collect_store.getCollectList(queryParams)
            total.value = res.total
            console.log(total.value,"total")
        }

        // 跳转至资讯详情
        const handleDetail = async (id) => {
            // 将该资讯的浏览量+1
            const code = await information_store.updateInformationRecord(id, 'view')
            if (code === 0) {
                // 跳转值详情页面
                router.push({name: 'informationDetails', query: {id}})
            }
        }
        const handleCurrentChange = (val) => {
            queryParams.value.pageNum = val
            initList()
        }

        initList()

        return () => {
            let items = []
            if(collectList.value[0]?.category_info){
                items = collectList.value.map((item,index) => {
                    return <div className={style.item} onClick={()=>{handleDetail(item.category_info.id)}}>
                        <div className={style.item_img}>
                            <el-image style={{width : "100%",height:"100%"}}
                                      fit={'cover'}
                                      src={item.category_info.imgUrl}
                            ></el-image>
                        </div>
                        <div className={style.item_content}>
                            <div className={style.item_title}>{item.category_info.title}</div>
                            <div className={style.item_time}>收藏时间：{formatDateTime(item.createdAt)}</div>
                        </div>
                    </div>
                })
            }else{
                items = collectList.value.map((item,index) => {
                    return <div className={style.item} onClick={()=>{handleDetail(item.information_info.id)}}>
                        <div className={style.item_img}>
                            <el-image style={{width : "100%",height:"100%"}}
                                      fit={'cover'}
                                      src={item.information_info?.info_img}
                            ></el-image>
                        </div>
                        <div className={style.item_content}>
                            <div className={style.item_title}>{item.project_info?.project_name}</div>
                            <div className={style.item_time}>收藏时间：{formatDateTime(item.createdAt)}</div>
                        </div>
                    </div>
                })
            }
            return <>
                <div className={style.collect_box }>
                    <div className={style.title}>收藏列表</div>

                    <div className={style.select}>
                        <el-form model={queryParams} size={'small'} inline={true}>
                            <el-form-item label={'收藏类型'} >
                                <el-select v-model={queryParams.type}
                                           onChange={initList}
                                           placeholder="请选择" size={'small'}>
                                    <el-option label="众筹资讯" value={1}></el-option>
                                    <el-option label="众筹项目" value={2}></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>

                    </div>
                    <div className={style.content}>
                        {items}
                    </div>
                    {
                        total.value === 0 ? <div className={style.no_data}>暂无数据</div> :
                            <Pagination
                                handleCurrentChange={handleCurrentChange}
                                total={total.value}
                            />
                    }
                </div>
            </>
        }
    }
})